<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3种图表类型</title>
    <script src="./js/echarts.min.js"></script>
    <!-- 自定义主题要引入 -->
    <script src="./js/purple.js"></script>
     
</head>
<body>
    <div id="app" style="width:1200px;height:800px;border:1px solid #999"></div>
    <script>
       
        // dark light  自定义
        var myechart = echarts.init(document.getElementById("app"),"light")
        var option = {
             title:{text:"郑州-武汉GDP对比"},
             legend:{data:["郑州","武汉"]},
             tooltip:{},
             xAxis:{},
             yAxis:{data:["2020","2021","2022"]},
             label:{
                        show:true,  //显示
                        position:'insideRight',//"out inside ,left,right,top,bottom,center" 显示的位置
                        fontSize:24, //文字大小
                        color:"#fff", //颜色
                        formatter:"{small|{a}-{b}}\n{c}{small|亿}", //格式 {a}系列名 {b}  数据名 {c} 数值
                        rich:{  //定义富文本样式
                            'big':{fontSize:24,}, //定义class big
                            "small":{fontSize:12,lineHeight:24} //定义class small
                        }
                    },
             series:[
                {
                  
                    name:"郑州",type:"bar",data:[10000,12000,9000],stack:true,},
                {   
                    label:{show:true,position:'insideRight'},
                    name:"武汉",type:'bar',data:[8000,13000,15000],stack:true}

             ]
        }
        myechart.setOption(option);
        
    </script>
</body>
</html>